<template>
  <el-card>
     <el-form
     ref="addForm"
     label-width="100px"
     :model="addData"
     :rules="rules"
     >
         <el-form-item label="角色名称" prop="roleid">
             <el-select v-model="addData.roleid"  >
                <el-option v-for="item in roleList" :key="item.id"  :label="item.rolename"  value="item.id"></el-option>
                <!-- value是要提交给后端的 -->
             </el-select>
         </el-form-item>
         <el-form-item label="账号" prop="username">
             <el-input v-model="addData.username" 
             disabled
             placeholder="请输入管理员账号" ></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
             <el-input v-model="addData.password" placeholder="请输入密码" ></el-input>
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-radio-group v-model="addData.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item>
             <el-button type="primary" @click="submitForm">更新</el-button>
         </el-form-item>
     </el-form>
  </el-card>
</template>

<script>
// 导入角色
import {getRoleList} from '../../request/role'
import {getAdminByUid} from '../../request/guan'
export default {
    // 2：在配置路由里设置props:true之后，在这里声明动态路由参数
    // 这里要和配置的地方保持一致
    props:['uid'],
    data(){
        return {
            roleList:[],
            addData:{
                uid:'',
                roleid:'',
                username:'',
                password:'',
                status:''
            },
            // 表单效验规则
            rules:{
                roleid:{required:true,message:'请输入角色'},
                username:{required:true,message:'请输入管理员名称'},
                password:{required:true,message:'请输入密码'},
                status:{required:true,message:'请选择状态'}
            }
        }
    },
    methods:{
        async getRoleList(){
            const list=await getRoleList()
            if(list){
                //更新数据
                this.roleList=list
            }
        },
        // 获取管理员当前信息，加载即更新的效果
        async getAdminByUid(){            //这里也可以写this.uid,他们在下面赋值了，所以写那个都是一样的
        // 如果没有解耦  那么应该写成this.$route.params.uid,直接从路由对象取
            const list=await getAdminByUid(this.addData.uid)
            if(list){
                this.addData=list
                // 将密码置空  可选
                // this.addData.password=''
            }
        },
        // 表单提交
        submitForm(){
            this.$refs.addForm.validate(async valid=>{
                if(valid){
                    const res=await this.$http.post('/api/useredit',this.addData)
                    console.log(res)
                    if(res.code===200){
                        this.$success('修改成功')
                        return this.$router.push('/guan')
                    }
                    this.$error('修改失败')
                }
            })
        },
    },
    created(){
        this.getRoleList()
        // 3:声明完动态路由参数后，可以直接在这用了
        this.addData.uid=this.uid  //this.uid 表示props:['uid'],
        this.getAdminByUid()
    }
}
</script>

<style lang="less" scoped>
.el-form{
    width: 600px;
    margin: auto;
}
</style>